<template>
    <div>
      <el-container>
          <el-header height="75px">
              <head-page></head-page>
          </el-header>
          <el-main>
              <div style="margin-top: -2%">
                  <el-button  style="margin-left: -88%;  margin-bottom: 10px;margin-top: 10px" :icon="ArrowLeft" @click="back()">返回搜索页面</el-button>
                  <div class="row">
                      <div class="col-md-6 col-md-offset-2">
                          <div class="quote-card">
                              <div class="quote-profile clearfix">
                                  <div class="quote-author-image">
                                      <img :src="url" alt="" style="width: 100px; height: 100px"/>
                                  </div>
                                  <div class="quote-author-name"> {{name}}
                                      <div>&nbsp;</div>
                                      <div class="quote-author-info">称谓：{{level}}</div>
                                      <div class="text">{{location}}</div>
                                  </div>
                                  <div class="quote-author-name">
                                      <el-col>
                                          <el-row>
                                              <div class="text">电话信息：</div>
                                          </el-row>
                                          <el-row>
                                              <el-link :type="'info'" :href="ProfileURL" :icon="HomeFilled">律师主页</el-link>
                                          </el-row>
                                      </el-col>
                                  </div>
                                  <div class="quote-author-phone">
                                      {{phone}}
                                  </div>
                                  <div class="quote-author-name">
                                      <el-col>
                                          <el-row>
                                              <div style="font-size: 15px; margin-top: 3%;margin-left: -2%">评分 </div>
                                              <el-rate
                                              v-model="star"
                                              disabled
                                              text-color="#ff9900"
                                              style="margin-left: 2%"
                                              />
                                          </el-row>
                                          <el-row class="text">咨询时间：9:00 - 21:00</el-row>
                                      </el-col>
                                  </div>
                                  <div class="quote-author-name">
                                      <el-col>
                                          <el-row>
                                              <el-button type="warning">预约咨询</el-button>
                                          </el-row>
                                          <el-row>
                                              <div class="text" style="margin-left: -20%">已服务人数</div>
                                              <div style="margin-top: 10%">{{HelpedPeople}}</div>
                                          </el-row>
                                      </el-col>
                                  </div>
                              </div>
                              <div class="quote-marks">“</div>
                              <div class="quote">
                                  <div class="quote-text" style="white-space: pre-wrap;">
                                      {{introduction}}
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </el-main>
          <el-container>
              <el-aside>
              <el-row style="padding: 6px">
                  <el-text style="margin-left: 90px; font-size: 18px; color: #5e5e5e">律师擅长领域</el-text>
              </el-row>
                  <div>
                <el-tag :key="tag.value"
                        v-for="tag in tags"
                    class="tag" type="info">{{tag.name}}
                </el-tag>
                  </div>
                  <div style="margin-top: 20%">
                      <div id="wordCloud" style="width: 290px; height: 200px"></div>
                  </div>
              </el-aside>
              <div style="margin-top: 1%">
                  <el-row>
                      <el-button type="warning" style="margin-top: -12px;margin-left: 15px; font-size: 15px; padding: -2px">用户评论</el-button>
                      <el-button type="danger" style="margin-top: -12px;margin-left: 15px; font-size: 15px; padding: -2px" @click="addComment">评价</el-button>
                      <el-dialog title="用户评价" v-model="editFormVisible">
                          <el-form :model="editForm" :rules="rules">
                              <el-form-item label="本次服务的评价" :label-width="formLabelWidth">
                                  <el-input
                                      v-model="editForm.describe"
                                      :autosize="{ minRows: 2, maxRows: 4 }"
                                      maxlength="100"
                                      show-word-limit
                                      type="textarea"
                                      autocomplete="off"
                                      placeholder="请输入本次律师服务的感受"
                                  >
                                  </el-input>
                              </el-form-item>
                              <el-form-item label="本次服务的评分" :label-width="formLabelWidth">
                                  <el-input v-model="editForm.score" autocomplete="off"></el-input>
                              </el-form-item>
                          </el-form>
                          <template v-slot:footer>
                              <div class="dialog-footer">
                                  <el-button @click="closeDialogForm">取消</el-button>
                                  <el-button type="primary" @click="newComment">确定</el-button>
                              </div>
                          </template>
                      </el-dialog>
                  </el-row>
                  <div class="radiusM" style="height: 40px;width: 800px; margin-top: 2%; margin-bottom: -1.2%">
                      <div style="margin-top: 6px; margin-left: -85%; font-size: 18px; color: #6b6b6b">
                          {{number}} 个回答</div>
                      <el-tag style="margin-top: -40px; margin-left: 650px">默认排序</el-tag>
                  </div>
                  <div class="radiusM" style="margin-top: 1%;width: 800px; margin-bottom: -101%; height: 800px">
                      <el-image :src="require('@/assets/commentNon.png')"
                                v-if="number === 0"/>
                  </div>
                  <div class="radiusM"
                       v-for="comment in comments"
                       :key="comment.userId"
                       style="margin-top: 1%;width: 800px; position: relative ; z-index: 800">
                      <el-row>
                          <el-col :span="15">
                              <div style="font-size: 15px; margin-left:15px;text-align: left; margin-top: 20px">{{comment.content}}</div>
                          </el-col>
                          <el-col :span="10" style="margin-top: -3%; margin-left: 60%">
                              <el-rate
                                  v-model="comment.score"
                                  disabled
                                  show-score
                                  text-color="#ff9900"
                                  score-template="{value} 星"
                              />
                          </el-col>
                      </el-row>
                  </div>
              </div>
          </el-container>
      </el-container>
    </div>
</template>

<style scoped>

.quote-card {
    width: 100%;
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 6px 18px 2px rgba(0,0,0,.3);
}

.quote-marks {
    position: absolute;
    padding-left: 5px;
    font-size: 8em;
    font-family: Times,serif;
    color: #DEE4E5;
    line-height: 1;
    bottom: 10px;
    right: 15px;
    opacity: 0.6;
}

.quote {
    width: 96%;
    padding: 1.5em;
    line-height: 1.6;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
    background-color: #F2F4F5;
}
.quote-text {
    width: 100%;
    font-weight: normal;
    font-family: 微软雅黑,serif;
    position: relative;
    text-align: left;
    color: #8994a1;
}
.tag{
    padding: 10px;
    margin-left: 5%;
    margin-top: 2%;
}
.quote-profile {
    padding-top: 20px;
    padding-left: 20px;
    display: table;
}
.quote-author-name {
    display: table-cell;
    vertical-align: middle;
    padding: 1em;
    font-weight: 700;
    font-size: 20px;
    color: #8994a1;
}
.radiusM {
    background-color: #FFFFFF;
    margin-top: -2%;
    margin-left: 2%;
    height: 60px;
    border: 1px solid var(--el-border-color);
    box-shadow: #3b3b3b;
}
.text{
    display: table-cell;
    vertical-align: middle;
    padding: 1em;
    font-weight: 500;
    font-size: 14px;
    color: #8994a1;
}
.quote-author-phone{
    display: table-cell;
    vertical-align: top;
    padding-right: 1em;
    padding-top: 50px;
    font-weight: 600;
    font-size: 25px;
    color: #8994a1;
}
.quote-author-info {
    display: block;
    font-weight: 300;
    font-size: 0.8em;
}
.quote-author-image {
    padding-left: 1em;
}
.quote-author-image img {
    height: 50px;
    border-radius: 50%;
}
</style>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import HeadPage from "@/components/HeadPage.vue";
import {ArrowLeft, HomeFilled} from "@element-plus/icons-vue";
import router from "@/router";
import {useRoute} from "vue-router";
import axios from "axios";
import {ElMessage} from "element-plus";
let userType = ref('-1');
let character = ref('');
let star = ref(5);
let introduction = ref('')
let url = ref('')
let name = ref('')
let phone = ref('')
const tags = ref<tag[]>([])
class tag{
    public value : number
    public name: string
    public constructor(id:number, area:string) {
        this.value = id;
        this.name = area;
    }
}
let HelpedPeople = ref(0)
let location = ref('')
const level = ref('')
class comment{
    public userId: number
    public score: number
    public content: string
    public constructor(id:number, value:number, describe:string) {
        this.userId = id;
        this.content = describe;
        this.score = value;
    }
}
const comments = ref<comment[]>([])
function getComment(){
    console.log(ProfileURL.value)
    axios.get('http://localhost:8081/user/getLawyercomment',{
        params:{
            profileUrl : ProfileURL.value
        }
    }).then((message) => {
        const data = message.data.data;
        console.log(data)
        comments.value = data;
        number = comments.value.length
    })
}

function newComment(){
    if(editForm.value.score > 5 || editForm.value.score <= 0){
        ElMessage.warning('请输入0-5之间的评分')
        return
    }
    if(editForm.value.describe === ''){
        ElMessage.warning('请输入评论')
    }
    axios.post('http://localhost:8081/user/postcomment', {
        userId : parseInt(userType.value),
        profileUrl : ProfileURL.value,
        score : editForm.value.score,
        content : editForm.value.describe
    }).then(()=>{
        searchLawyer()
        getComment()
    })
    closeDialogForm()
    closeDialogForm()
}
let ProfileURL = ref<string>('')
let number = comments.value.length

let lawyerId = ''
let ch = useRoute().params;

onMounted( ()=> {
    character.value = ch['character'].toString()
    userType.value = ch['id'].toString()
    lawyerId = ch['pid'].toString()
    searchLawyer();
});
const back = () => {
    router.push('/log/' + userType.value + '/lawyer/' + character.value)
}

const searchLawyer = () =>{
    axios.get('http://localhost:8081/query/SearchById',{
        params:{
            LawyerDocId:lawyerId
        }
    }).then((message : any)=>{
        tags.value = []
       const data = message.data.data;
        if(data === null){
            ElMessage.warning("未能返回律师信息")
            return
        }
       introduction.value = data.LawyerIntroduction;
       url.value = data.ImageURL;
       name.value = data.LawyerName;
       location.value = data.ServiceArea;
       phone.value = data.Phone;
       star.value = data.Score;
       level.value = data.Position;
       if(phone.value === ''){
           phone.value = '暂无该律师电话'
       }
       ProfileURL.value = data.ProfileURL;
       HelpedPeople.value = data.HelpedPeople;
       if(data.ProfessionalField.length > 4){
           const tagString = data.ProfessionalField.split('：')[1];
           console.log(tagString)
           let tagStrings = [tag]
           if(tagString.includes('、')){
               tagStrings = tagString.split('、');
           }
           else if(tagString.includes(',')){
               tagStrings = tagString.split(',');
           }
           else{
               if(tagString !== ''){
                   const newTag = new tag(0, tagString);
                   tags.value.push(newTag)
               }
               getComment()
               return;
           }
           tagStrings.forEach((tagString:any, index:number) => {
               const newTag = new tag(index + 1, tagString.trim());
               tags.value.push(newTag);
           });
       }
        getComment()
        if(tags.value.length > 0) init()
    })
}

const editFormVisible = ref(false)
const closeDialogForm = () => {
    editFormVisible.value = false;
};
const openDialogForm = () => {
    editFormVisible.value = true;
};
const editForm = ref({
    name:'',
    describe:'',
    score:0
});
function addComment(){
    if(userType.value === '-1'){
        ElMessage.error("登陆后才能进行评论哦~")
    }
    else{
        openDialogForm()
    }
}
const rules = {
    describe: [
        { required: true, message: '请输入评价内容' ,trigger: ['blur', 'change'] },
        { min: 1, max: 100, message: '评论长度不超过 100 个字', trigger: ['blur', 'change']},
    ],
    score: [
        { required: true, message: '请输入评分', trigger: ['blur', 'change'] }
    ],
}
const formLabelWidth = '150px';

// 词云
import * as echarts from 'echarts/core'
import 'echarts-wordcloud'
const init = () => {
    var myChart = echarts.init(document.getElementById('wordCloud')!)

    const option = {
        series: [
            {
                type: 'wordCloud',

                // 要绘制云的形状,默认是 circle，可选的参数有 cardioid 、 diamond 、 triangle-forward 、 triangle 、 star
                shape: 'circle',

                // 保持maskImage的纵横比或1:1的形状
                // 从echarts-wordcloud@2.1.0开始支持该选项
                keepAspect: false,

                // 左/上/宽/高/右/下用于字云的定位
                // 默认放置在中心，大小为75% x 80%。
                left: 'center',
                top: 'center',
                width: '80%',
                height: '80%',
                right: null,
                bottom: null,

                // 数据中的值将映射到的文本大小范围。
                // 默认值为最小12px，最大60px。
                sizeRange: [10, 50],

                // 文字旋转范围和步进程度。文本将通过rotationStep 45在[- 90,90]范围内随机旋转
                rotationRange: [-90, 90],
                rotationStep: 45,

                // 网格大小(以像素为单位)，用于标记画布的可用性
                // 网格大小越大，单词之间的间隔就越大
                gridSize: 8,

                // 设置为true允许文字部分地绘制在画布之外。
                // 允许画比画布大的字
                // 从echarts-wordcloud@2.1.0开始支持该选项
                drawOutOfBound: false,

                // 如果字体太大，无法显示文本，是否缩小文本。如果设置为false，则文本将不被渲染。如果设置为true，文本将被缩小。
                shrinkToFit: false,

                // 是否执行布局动画。
                //当单词较多时禁用会导致UI阻塞。
                layoutAnimation: true,

                // 全局文本样式
                textStyle: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    // Color可以是回调函数或颜色字符串
                    color: function () {
                        // 任意颜色
                        return (
                            'rgb(' +
                            [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                            ].join(',') +
                            ')'
                        )
                    },
                },
                emphasis: {
                    focus: 'self',
                    textStyle: {
                        textShadowBlur: 10,
                        textShadowColor: '#333',
                    },
                },
                data: tags.value,
            },
        ],
    }
    myChart.setOption(option)
}
const data =[
    {value: 67, name: '红腹角雉'},
    {value: 98, name: '麝牛'},
    {value: 97, name: '山舌鱼'},
    {value: 100, name: '羚羊'},
    {value: 37, name: '非洲王子'},
    {value: 83, name: '麋鹿'},
    {value: 60, name: '中华鲟'},
    {value: 42, name: '鮪鱼'},
    {value: 96, name: '射水鱼'},
    {value: 54, name: '果子狸'},
    {value: 33, name: '小春鱼'},
    {value: 84, name: '水獭'},
    {value: 86, name: '刺猬'}
]


</script>
